<template>
	<div class="js-copy js-content pd_body">
		<div class="hk_bg_top">
			<img
				src="https://res.metaera.hk/resources/assets/images/hk/hk_bg_top.png"
				alt="Background"
			/>
		</div>
		<div class="hk_bg_right">
			<img
				src="https://res.metaera.hk/resources/assets/images/hk/hk_bg_right.png"
				alt="Background"
			/>
		</div>
		<div class="hk_content">
			<topHeader :type="'white'"></topHeader>
			<div
				style="height: 100vh"
				v-if="SpecialDetails == null || SpecialDetails.subordinate == null"
			>
			</div>
			<div class="dexBox_week">
				<img
					src="https://res.metaera.hk/resources/assets/images/hk/hk_top_image.png"
				/>
			</div>
			<div class="Main margin_auto flex justify_content_sb">
				<div class="MainList MainList_top">
					<div
						class="MainItem tophit"
						:ref="'id' + item.id"
						v-for="(item, index) in SpecialDetails.subordinate"
						:key="index"
					>
						<div v-if="item.data != null && item.data.length > 0 && index == 0">
							<div class="MainItemHeadNew flex align_items_c">
								<div>{{ item.name }}</div>
							</div>
							<div class="hk_jxlist">
								<div
									class="week_pc align_items_c pointer"
									v-for="(items, indexs) in item.data"
									:key="indexs"
								>
									<router-link
										target="_blank"
										:to="{
											name: items.type == 2 ? '/kuaixun_wz' : '/gw_detail',
											params: { id: items.id },
										}"
									>
										<wzitemnew
											class="wzitemnew"
											:item="items"
											v-if="indexs < (showMore ? 20 : 5)"
										>
										</wzitemnew>
										<perNews class="perNews" :item="items"></perNews>
									</router-link>
								</div>
								<div class="hk_more" v-if="item.data.length > 5">
									<div class="hk_more_btn" @click="showMoreClick()"
										>{{ showMore ? "Hide" : "More" }}
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="MainRight">
					<div style="margin-top: 22px"></div>
					<hkFlash :selarticleList="hkFlashLists"> </hkFlash>
				</div>
			</div>
			<div
				class="Main margin_auto flex justify_content_sb"
				v-if="SpecialDetails.subordinate.length > 2"
			>
				<div class="MainList MainList_full">
					<div
						class="MainItem tophit"
						:ref="'id' + item.id"
						v-for="(item, index) in SpecialDetails.subordinate"
						:key="index"
					>
						<div
							v-if="
								item.data != null &&
								item.data.length > 0 &&
								index > 0 &&
								SpecialDetails.subordinate.length - 1 > index
							"
						>
							<div class="MainItemHeadNew flex align_items_c">
								<div>{{ item.name }}</div>
							</div>
							<div class="hk_jxlist hk_jxlist_full">
								<div
									class="week_pc align_items_c pointer"
									v-for="(items, indexs) in item.data"
									:key="indexs"
								>
									<router-link
										target="_blank"
										:to="{
											name: items.type == 2 ? '/kuaixun_wz' : '/gw_detail',
											params: { id: items.id },
										}"
									>
										<wzitemnew
											class="wzitemnew"
											:item="items"
											v-if="indexs < 20"
										></wzitemnew>
										<perNews
											class="perNews"
											:item="items"
											v-if="indexs < 20"
										></perNews>
									</router-link>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="ac_calendar_aclist">
				<div class="hk_ac_calendar_aclist_bg">
					<div class="hk_ac_calendar_aclist_title">行业活动</div>

					<div class="ac_calendar_aclist_content">
						<div
							class="hk_ac_calendar_aclist_item pointer"
							v-for="(item, index) in this.SpecialDetails.activityList"
							:key="index"
						>
							<div
								class="ac_calendar_aclist_item_content"
								@click="tipShow(item)"
							>
								<div class="ac_calendar_aclist_item_img">
									<img :src="item.pic" />
									<div class="ac_calendar_start_hour">{{
										formatTime(item.start_time)
									}}</div>
									<div
										class="ac_calendar_line"
										:class="{ ac_calendar_line_noStart: item.startStatus == 0 }"
										v-if="item.startStatus == 0"
									>
										<div> </div>
										活动尚未开始
									</div>
									<div
										class="ac_calendar_line"
										:class="{ ac_calendar_line_end: item.startStatus == 2 }"
										v-if="item.startStatus == 2"
									>
										<div> </div>
										活动已结束
									</div>
									<div
										class="ac_calendar_line"
										:class="{
											ac_calendar_line_progress: item.startStatus == 1,
										}"
										v-if="item.startStatus == 1"
									>
										<div></div>
										活动正在进行中
									</div>
								</div>
								<div class="hk_ac_calendar_aclist_item_title">{{
									item.title
								}}</div>
								<div class="hk_ac_calendar_aclist_item_info">
									<div class="ac_calendar_aclist_item_area">
										<img
											src="https://res.metaera.hk/resources/assets/images/active/6_b.png"
										/>
										<span>{{ item.address ? item.address : "暂无地址" }}</span>
									</div>
									<div class="ac_calendar_aclist_item_date">
										<img
											src="https://res.metaera.hk/resources/assets/images/active/7_b.png"
										/>
										<span
											>{{ formatDate(item.start_time) }}
											{{ item.timeZone }}</span
										>
									</div>
								</div>
								<div class="hk_ac_calendar_aclist_item_people">
									<div class="ac_calendar_aclist_item_organizer">
										<span>ORGANIZER：</span>
										<img :src="getHostArray(item).pic" />
										<span>{{ getHostArray(item).name }}</span>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="Main margin_auto flex justify_content_sb">
				<div class="MainList MainList_full">
					<div
						class="MainItem tophit"
						:ref="'id' + item.id"
						v-for="(item, index) in SpecialDetails.subordinate"
						:key="index"
					>
						<div
							v-if="
								item.data != null &&
								item.data.length > 0 &&
								index == SpecialDetails.subordinate.length - 1 &&
								index > 0
							"
						>
							<div class="MainItemHeadNew flex align_items_c">
								<div>{{ item.name }}</div>
							</div>
							<div class="hk_jxlist hk_jxlist_full">
								<div
									class="week_pc align_items_c pointer"
									v-for="(items, indexs) in item.data"
									:key="indexs"
								>
									<router-link
										target="_blank"
										:to="{
											name: items.type == 2 ? '/kuaixun_wz' : '/gw_detail',
											params: { id: items.id },
										}"
									>
										<wzitemnew
											class="wzitemnew"
											:item="items"
											v-if="indexs < 20"
										>
										</wzitemnew>
										<perNews class="perNews" :item="items" v-if="indexs < 20">
										</perNews>
									</router-link>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<bottom :type="'color'"></bottom>
			<div style="height: 30px"></div>
		</div>
	</div>
</template>

<script>
import { getSpecialDetails } from "@/api/home";
import wzitem from "./../../components/pc/wzitem.vue";
import download from "./../../components/pc/download.vue";
import topHeader from "../../components/pc/topHeader2.vue";
import wzitemnew from "./../../components/pc/wzitemnew.vue";
import perNews from "./../home/mobile/perNews.vue";
import bottom from "../../components/pc/bottom.vue";
import hotArticle from "../home/hotArticle.vue";
import hkFlash from "./hkFlash.vue";

export default {
	name: "",
	components: {
		wzitem,
		download,
		topHeader,
		wzitemnew,
		perNews,
		bottom,
		hotArticle,
		hkFlash,
	},
	data() {
		return {
			active: 0,
			showMore: false,
			info: {},
			SpecialDetails: {},
			hkFlashLists: [],
		};
	},
	created() {
		this.getSpecialDetails();
	},
	methods: {
		tipShow(item) {
			this.item = item;
			// this.showTips = true;
			// 生成目标路由的 URL
			const routePath = this.$router.resolve({
				name: "/ac_detail",
				params: { id: this.item.id },
			}).href;
			// 在新标签页中打开目标路由
			window.open(routePath, "_blank");
		},
		getHostArray(item) {
			if (item.organizer && item.organizer.length > 10) {
				return JSON.parse(item.organizer)[0];
			} else {
				return { pic: "", name: "" };
			}
		},
		formatDate(dateString) {
			const date = new Date(dateString);
			return date.toLocaleString("zh-CN", {
				year: "numeric",
				month: "2-digit",
				day: "2-digit",
				hour: "2-digit",
				minute: "2-digit",
				hour12: false,
			});
		},
		formatTime(timestamp) {
			const date = new Date(timestamp);
			let hours = date.getHours();
			const minutes = date.getMinutes();
			const ampm = hours >= 12 ? "PM" : "AM";
			hours = hours % 12;
			hours = hours ? hours : 12; // the hour '0' should be '12'
			const strMinutes = minutes < 10 ? "0" + minutes : minutes;
			return hours + ":" + strMinutes + " " + ampm;
		},
		showMoreClick() {
			this.showMore = !this.showMore;
		},
		getSpecialDetails() {
			getSpecialDetails({ id: 19 })
				.then((res) => {
					if (res.code == 200) {
						res.data.subordinate.forEach((element) => {
							if (element.id == 21) {
								this.hkFlashLists = element.data.slice(0, 13);
							}
						});

						const subordinate = res.data.subordinate.filter(
							(item) => item.id !== 21 && item.id !== 22 && item.data.length > 0
						);

						const subordinate1 = res.data.subordinate.filter(
							(item) => item.id == 22
						);
						res.data.subordinate = subordinate.concat(subordinate1);
						this.SpecialDetails = res.data;
					}
				})
				.catch((error) => {
					// this.$message.error(error.message);
				});
		},

		md(item, index) {
			this.active = index;
			this.$el
				.querySelector(".id" + item.id)
				.scrollIntoView({ block: "start", behavior: "smooth" });
		},
	},
};
</script>
<style scoped>
.pd_body {
	height: 100vh;
	overflow-y: scroll;
	background: #f4f6fa;
}
.scroll-container {
	height: 100vh;
	overflow-y: scroll;
}
.js-copy {
	position: absolute;
	top: 0px;
	left: 0;
	width: calc(100vw);
	margin: 0 auto;
	/* background: black; */
}
.hk_bg_top {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: calc(100vw * (3242 / 2684));
	z-index: 1; /* 背景图片在最底层 */
}
.hk_bg_right {
	position: absolute;
	top: 40vw;
	left: 0;
	width: 100%;
	height: calc(100vw * (3494 / 2238));
	z-index: 1; /* 背景图片在最底层 */
}
.hk_bg_left {
	position: absolute;
	top: 120vw;
	left: 0;
	width: 100%;
	height: auto;
	z-index: 1; /* 背景图片在最底层 */
	display: none;
}

.hk_bg_top img,
.hk_bg_right img,
.hk_bg_left img {
	width: 100%;
	height: auto;
	object-fit: cover; /* 使图片覆盖整个容器 */
}

.hk_content {
	position: relative;
	z-index: 2;
	min-height: 100vh;
	box-sizing: border-box;
	background-image: url("https://res.metaera.hk/resources/assets/images/hk/hk_bg_left.png"); /* 替换为实际的图片路径 */
	background-position: center calc(120%); /* 背景图片居中且向下偏移100px */
	background-repeat: no-repeat; /* 不重复背景图片 */
	background-size: contain; /* 调整图片大小以适应容器 */
}

.dexBox_week img {
	margin-top: 20px;
	width: 80%;
	margin-left: 10%;
	object-fit: cover;
	border-radius: 20px;
}
.dexBox_week {
	width: 100%;
	margin-top: 100px;
}
.wzitemnew {
	display: flex;
}
.perNews {
	display: none !important;
}
.zt_recommend {
	display: contents;
}
.zt_resou {
	display: contents;
}
.zt_download {
	display: flex;
}
@media screen and (max-width: 900px) {
	.dexBox_week {
		margin-top: 60px;
	}
	.dexBox_week img {
		margin-top: 20px;
		width: 90%;
		margin-left: 5%;
		border-radius: 20px;
	}
	.wzitemnew {
		display: none;
	}
	.perNews {
		display: contents !important;
	}
	.zt_recommend,
	.zt_resou,
	.zt_download {
		display: none;
	}
}
</style>
<style scoped>
.Main {
	margin-left: 10%;
	width: 80%;
	padding-top: 10px;
	background: rgba(0, 0, 0, 0);
}
.MainRight {
	display: block;
}
/* Main */

.MainList {
	margin-left: 0px;
	width: 100%;
	padding-bottom: 20px;
	margin-top: 10px;
	margin-bottom: 20px;
}
.MainList_full {
	width: 100%;
}

.MainList_top {
	margin-right: 5%;
}
.MainItem {
	width: 100%;
	opacity: 1;
	margin-top: 40px;
}

.MainItem:nth-child(1) {
	margin-top: 0;
}

.MainItemHeadNew div {
	font-family: "PingFang SC", "微软雅黑", "Helvetica Neue", "Hiragino Sans GB",
		"Microsoft YaHei", Arial, sans-serif;
	font-size: 30px;
	font-weight: 500;
	line-height: 30px;
	letter-spacing: 0em;

	font-variation-settings: "opsz" auto;
	/* 纯白 */
	color: #1a1a1a;
}

.MainItemHeadNew {
	width: 100%;
	height: 61px;
	border-radius: 20px 20px 0 0;
	position: relative;
	margin-top: 20px;
}

.wzitem {
	width: 94%;
	margin: 0 auto;
	height: 142px;
	border-bottom: 1px solid #efefef;
}

.wzitem img {
	width: 160px;
	height: 100px;
	border-radius: 5px;
}

.wzitemL {
	width: 70%;
	margin-left: 21px;
	height: 100px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.wzitemL div:nth-child(1) {
	font-size: 18px;
	font-family: "PingFang SC", "微软雅黑", "Helvetica Neue", "Hiragino Sans GB",
		"Microsoft YaHei", Arial, sans-serif;
	font-weight: 600;
	color: #000000;
}

.wzitemL div:nth-child(2) {
	font-size: 14px;
	font-family: "PingFang SC", "微软雅黑", "Helvetica Neue", "Hiragino Sans GB",
		"Microsoft YaHei", Arial, sans-serif;
	font-weight: 400;
	color: #a0a0a7;
}
.week_pc {
	display: contents;
}

.steps {
	width: 100px;
	margin-left: 10px;
}

.stepsTime {
	font-size: 12px;
	font-family: DINPro-Regular, DINPro;
	font-weight: 400;
	color: #000000;
}

.stepsVal {
	font-size: 14px;
	font-family: "PingFang SC", "微软雅黑", "Helvetica Neue", "Hiragino Sans GB",
		"Microsoft YaHei", Arial, sans-serif;
	font-weight: 600;
	color: #000000 !important;
	margin-top: 5px;
}

.js-box {
	margin-top: 0;
	position: fixed;
}
.hk_jxlist {
	background-color: #fff;
	border-radius: 20px;
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 0px;
	padding-bottom: 20px;
	border: 1px solid #e1e3f1;
}
.hk_more {
	width: 100%;
	margin-top: 34px;
	padding-bottom: 20px;
	justify-content: center;
	display: flex;
}
.hk_more_btn {
	box-sizing: border-box;
	border: 2px solid #333333;
	border-radius: 20px;
	width: 92px;
	height: 32px;
	text-align: center;
}
@media screen and (max-width: 900px) {
	.Main {
		display: contents;
	}

	.MainRight {
		display: block;
	}
	.Main_l {
		width: 100%;
		height: calc(100vw * 568 / 370);
	}
	.MainList {
		width: 100%;
		margin-top: 20px;
		margin-left: 0px;
		margin-right: 0px;
	}

	.MainItem {
		width: 90%;
		margin-left: 5%;
		/* background: #ffffff; */
		/* border-radius: 18px 18px 18px 18px; */
		opacity: 1;
		margin-top: 20px;
	}
	.hk_jxlist {
		padding-top: 10px;
		padding-bottom: 10px;
	}
}
</style>

<!-- ac_calendar_aclist -->
<style scoped>
.ac_calendar_aclist {
	width: 100%;
	/* margin-top: 90px; */
	/* background: url(https://res.metaera.hk/resources/assets/images/active/12.png); */
	background-size: cover;
	background-position: center;
	overflow: hidden;
}
.hk_ac_calendar_aclist_bg {
	width: 80%;
	margin-left: 10%;
	margin-top: 10px;
}

.hk_ac_calendar_aclist_title {
	font-family: "PingFang SC", "微软雅黑", "Helvetica Neue", "Hiragino Sans GB",
		"Microsoft YaHei", Arial, sans-serif;
	font-size: 30px;
	font-weight: 500;
	line-height: 30px;
	letter-spacing: 0em;

	font-variation-settings: "opsz" auto;
	/* 纯白 */
	color: #1a1a1a;
}

.ac_calendar_aclist_title1 {
	font-family: "PingFang SC", "微软雅黑", "Helvetica Neue", "Hiragino Sans GB",
		"Microsoft YaHei", Arial, sans-serif;
	font-size: 28px;
	font-weight: 400;
	line-height: 28px;
	letter-spacing: 0em;

	font-variation-settings: "opsz" auto;
	/* 纯白 */
	color: black;
	text-decoration: underline;
	text-decoration-color: #0256ff; /* 设置下划线颜色 */
	text-decoration-thickness: 4px; /* 设置下划线高度 */
	text-underline-offset: 10px; /* 调整下划线与文字的距离 */
}
.ac_calendar_aclist_date {
	margin-top: 40px;
	font-family: "PingFang SC", "微软雅黑", "Helvetica Neue", "Hiragino Sans GB",
		"Microsoft YaHei", Arial, sans-serif;
	font-size: 24px;
	font-weight: 400;
	line-height: 24px;
	display: flex;
	align-items: center;
	text-transform: capitalize;
	letter-spacing: 0em;

	font-variation-settings: "opsz" auto;
	/* 纯白 */
	color: #ffffff;
}
.ac_calendar_aclist_content {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 60px;
	margin-left: -2%;
	width: 104%;
}
.hk_ac_calendar_aclist_item {
	margin-top: 50px;
	margin-left: 1.6%;
	margin-right: 1.6%;
	flex: 1 0 30%;
	box-sizing: border-box;
	flex-grow: 0;
	border-radius: 20px;
	position: relative;
	overflow: hidden;
	padding: 12px;

	background: linear-gradient(
		135deg,
		rgba(255, 255, 255, 0.47) 0%,
		rgba(255, 255, 255, 0) 112%
	);
}

.hk_ac_calendar_aclist_item::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(255, 255, 255, 0.8);
	border-radius: 20px;
	z-index: 0;
	border: 1px solid #e1e3f1;
}

.ac_calendar_aclist_item_content {
	position: relative;
	z-index: 1;
}

.ac_calendar_aclist_item_img {
	position: relative;

	border-radius: 10px;
	/* padding: 12px; */
}

.ac_calendar_aclist_item_img img {
	width: 100%;
	border-radius: 10px;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.ac_calendar_start_hour {
	top: 10px; /* 距离顶部的距离 */
	left: 10px; /* 距离左边的距离 */
	position: absolute;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
	background-color: rgba(0, 0, 0, 0.5); /* 半透明背景 */
	color: white; /* 字体颜色 */
	border-radius: 7px;
	font-family: PingFang SC;
	font-size: 14px;
	font-weight: 400;
	line-height: 14px;
	display: flex;
	align-items: center;
	text-transform: uppercase;
	letter-spacing: 0em;

	font-variation-settings: "opsz" auto;
	/* 纯白 */
	color: #ffffff;
	display: none;
}

.ac_calendar_line {
	top: 10px; /* 距离顶部的距离 */
	right: 10px; /* 距离右边的距离 */
	position: absolute;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
	background-color: rgba(0, 0, 0, 0.5); /* 半透明背景 */
	color: white; /* 字体颜色 */
	border-radius: 7px;
	font-family: PingFang SC;
	font-size: 14px;
	font-weight: 400;
	line-height: 14px;
	display: flex;
	align-items: center;
	text-transform: uppercase;
	letter-spacing: 0em;

	font-variation-settings: "opsz" auto;
	/* 纯白 */
	color: #ffffff;
}

.ac_calendar_line_noStart {
	background-color: rgba(255, 255, 255, 0.9); /* 半透明背景 */
	color: #0256ff;
}

.ac_calendar_line_end {
	background-color: rgba(255, 255, 255, 0.9); /* 半透明背景 */
	color: gray;
}

.ac_calendar_line_noStart div {
	width: 10px;
	height: 10px;
	border-radius: 10px;
	margin-right: 10px;
	background: linear-gradient(
		45deg,
		#9945ff,
		#8752f3,
		#5497d5,
		#43b4ca,
		#28e0b9,
		#19fb9b
	);
}

.ac_calendar_line_progress {
	background-color: rgba(255, 255, 255, 0.9); /* 半透明背景 */
	color: #08bf66;
}
.ac_calendar_line_progress div {
	width: 10px;
	height: 10px;
	border-radius: 10px;
	margin-right: 10px;
	background: #08bf66;
}

.hk_ac_calendar_aclist_item_title {
	margin-top: 15px;
	font-family: "PingFang SC", "微软雅黑", "Helvetica Neue", "Hiragino Sans GB",
		"Microsoft YaHei", Arial, sans-serif;
	font-size: clamp(14px, calc(100vw * 16 / 1280), 18px);
	font-weight: 400;
	line-height: 30px;
	text-transform: uppercase;
	letter-spacing: 0em;

	font-variation-settings: "opsz" auto;
	/* 纯白 */
	color: #333333;
}
.hk_ac_calendar_aclist_item_info {
	margin-top: 6px;
	display: block;
	justify-content: space-between;
}
.ac_calendar_aclist_item_area,
.ac_calendar_aclist_item_date {
	margin-top: 6px;
}

.hk_ac_calendar_aclist_item_info span {
	font-family: "PingFang SC", "微软雅黑", "Helvetica Neue", "Hiragino Sans GB",
		"Microsoft YaHei", Arial, sans-serif;
	font-size: clamp(10px, calc(100vw * 12 / 1280), 14px);
	font-weight: normal;
	line-height: 16px;
	letter-spacing: 0em;

	font-variation-settings: "opsz" auto;
	/* 纯白 */
	color: #333333;
}
.hk_ac_calendar_aclist_item_info img {
	width: auto;
	height: 15px;
	margin-right: 10px;
}

.hk_ac_calendar_aclist_item_people {
	margin-top: 8px;
	display: flex;
	justify-content: space-between;
}
.hk_ac_calendar_aclist_item_people span {
	font-family: "PingFang SC", "微软雅黑", "Helvetica Neue", "Hiragino Sans GB",
		"Microsoft YaHei", Arial, sans-serif;
	font-size: 10px;
	font-weight: normal;
	line-height: 10px;
	text-transform: uppercase;
	letter-spacing: 0em;

	font-variation-settings: "opsz" auto;
	/* 纯白 */
	color: #333333;
}
.hk_ac_calendar_aclist_item_people img {
	margin-left: 10px;
	width: 18px;
	height: 18px;
	margin-right: -10px;
	border-radius: 9px;
	object-fit: cover;
}

.ac_calendar_aclist_item_organizer img {
	margin-right: 4px;
}

@media screen and (max-width: 900px) {
	.ac_calendar_aclist {
		margin-top: 10px;
	}
	.hk_ac_calendar_aclist_bg {
		width: 90%;
		margin-left: 5%;
		margin-top: 20px;
	}
	.ac_calendar_aclist_title {
		font-size: 20px;
		line-height: 30px;
		text-decoration-thickness: 2px; /* 设置下划线高度 */
		text-underline-offset: 6px; /* 调整下划线与文字的距离 */
	}

	.ac_calendar_aclist_date {
		margin-top: 20px;
		font-size: 18px;
	}

	.ac_calendar_aclist_content {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 60px;
		margin-left: -0%;
		width: 100%;
	}

	.hk_ac_calendar_aclist_item {
		margin-top: 30px;
		margin-left: 0%;
		margin-right: 0%;
		flex: 1 0 100%;
		border-radius: 20px;
		padding: 12px;
	}

	.hk_ac_calendar_aclist_item_info img {
		width: auto;
		height: clamp(10px, calc(100vw * 12 / 414), 14px);
		margin-right: 6px;
	}
}
</style>
